<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>The source code</title>
  <link href="../resources/prettify/prettify.css" type="text/css" rel="stylesheet" />
  <script type="text/javascript" src="../resources/prettify/prettify.js"></script>
  <style type="text/css">
    .highlight { display: block; background-color: #ddd; }
  </style>
  <script type="text/javascript">
    function highlight() {
      document.getElementById(location.hash.replace(/#/, "")).className = "highlight";
    }
  </script>
</head>
<body onload="prettyPrint(); highlight();">
  <pre class="prettyprint lang-js"><span id='BUI'>/**
</span> * @fileOverview 树形列表
 * @ignore
 */

var BUI = require(&#39;bui-common&#39;),
  List = require(&#39;bui-list&#39;),
  Mixin = require(&#39;./treemixin&#39;),
  Selection = require(&#39;./selection&#39;);

<span id='BUI-Tree-TreeList'>/**
</span> * @class BUI.Tree.TreeList
 * 树形列表控件
 * ** 你可以简单的使用配置数据 **
 * &lt;pre&gt;&lt;code&gt;
 *  BUI.use(&#39;bui/tree&#39;,function(Tree){
 *    var tree = new Tree.TreeList({
 *      render : &#39;#t1&#39;,
 *      nodes : [
 *        {id : &#39;1&#39;,text : &#39;1&#39;,children : [{id : &#39;11&#39;,text : &#39;11&#39;}]},
 *        {id : &#39;2&#39;,text : &#39;2&#39;}
 *      ]
 *    });
 *    tree.render();
 *  });
 * &lt;/code&gt;&lt;/pre&gt;
 * ** 你也可以显示根节点 ** 
 * &lt;pre&gt;&lt;code&gt;
 *  BUI.use(&#39;bui/tree&#39;,function(Tree){
 *    var tree = new Tree.TreeList({
 *      render : &#39;#t1&#39;,
 *      root :{
 *        id : &#39;0&#39;,
 *        text : &#39;0&#39;,
 *        children : [
 *          {id : &#39;1&#39;,text : &#39;1&#39;,children : [{id : &#39;11&#39;,text : &#39;11&#39;}]},
 *          {id : &#39;2&#39;,text : &#39;2&#39;}
 *        ]
 *      },
 *      showRoot : true
 *    });
 *    tree.render();
 *  });
 * &lt;/code&gt;&lt;/pre&gt;
 *
 * ** 你也可以异步加载数据 ** 
 * &lt;pre&gt;&lt;code&gt;
 *  BUI.use([&#39;bui/tree&#39;,&#39;bui/data&#39;],function(Tree,Data){
 *    var store = new Data.TreeStore({
 *        root :{
 *          id : &#39;0&#39;,
 *          text : &#39;0&#39;
 *        },
 *        url : &#39;data/nodes.php&#39;
 *      }),
 *      tree = new Tree.TreeList({
 *        render : &#39;#t1&#39;,
 *        store : store,
 *        showRoot : true //可以不配置，则不显示根节点
 *      });
 *    tree.render();
 *    store.load({id : &#39;0&#39;});//加载根节点，也可以让用户点击加载
 *  });
 * &lt;/code&gt;&lt;/pre&gt;
 *
 * ** 你还可以替换icon ** 
 * &lt;pre&gt;&lt;code&gt;
 *  BUI.use(&#39;bui/tree&#39;,function(Tree){
 *    var tree = new Tree.TreeList({
 *      render : &#39;#t1&#39;,
 *      dirCls : &#39;folder&#39;, //替换树节点的样式
 *      leafCls : &#39;file&#39;, //叶子节点的样式
 *      nodes : [ //数据中存在cls 会替换节点的图标样式
 *        {id : &#39;1&#39;,text : &#39;1&#39;cls:&#39;task-folder&#39;,children : [{id : &#39;11&#39;,text : &#39;11&#39;,cls:&#39;task&#39;}]},
 *        {id : &#39;2&#39;,text : &#39;2&#39;}
 *      ]
 *    });
 *    tree.render();
 *  });
 *  &lt;/code&gt;&lt;/pre&gt;
 * @mixin BUI.Tree.Mixin
 * @extends BUI.List.SimpleList
 */
var TreeList = List.SimpleList.extend([Mixin,Selection],{
  
},{
  ATTRS : {
    itemCls : {
      value : BUI.prefix + &#39;tree-item&#39;
    },
    itemTpl : {
      value : &#39;&lt;li&gt;{text}&lt;/li&gt;&#39;
    },
    idField : {
      value : &#39;id&#39;
    }
  }
},{
  xclass : &#39;tree-list&#39;
});

module.exports = TreeList;
</pre>
</body>
</html>
